(function () {
  $(document).ready(function () {
    var isPaging = false;
    $("#carousel-news").carousel({
      interval: false,
      wrap: false,
      keyboard: false,
    });

    // 上一页
    $(".carousel-control.left-control").bind("click", function (e) {
      if (isPaging) {
        return;
      }
      isPaging = true;
      e.preventDefault();
      e.stopPropagation();
      $("#carousel-news").carousel("prev");
      setTimeout(function () {
        if (pageIndex > 1) {
          pageIndex--;
          isPaging = false;
        } else {
          isPaging = false;
        }
      }, 600);
    });

    var debounceNext = _.debounce(function (e) {
      if (pageIndex >= maxIndex) {
        isPaging = false;
        return;
      }
      if (pageIndex >= 5) {
        loading.show();
        // 获取下一页
        getDataByPageIndex(pageIndex + 1, function (res) {
          cacheMap[pageIndex + 1] = res;
          var carsouse = renderCarouseItem(res);
          $("#carousel-inner").append($(carsouse));
          $("#carousel-news").carousel("next");
          setTimeout(function () {
            loading.hide();
            pageIndex++;
            isPaging = false;
          }, 600);
        });
      } else {
        $("#carousel-news").carousel("next");
        setTimeout(function () {
          pageIndex++;
          isPaging = false;
        }, 600);
      }
    }, 200);

    // 下一页
    $(".carousel-control.right-control").bind("click", function (e) {
      if (isPaging) {
        return;
      }
      e.preventDefault();
      e.stopPropagation();
      isPaging = true;
      debounceNext(e);
    });
  });
  // 1.单个模板
  // 2.首次拿5页数据 单页8条一共40条
  // 3.如果不够80条，说明数据就这么多了。没有再多的了。点击页面切换时候不需要做过多的任务
  // 4.如果超过80条，每点一下下一页，要提前获取下一页的数据，并插入dom中
  // 5.所以还要加一个loading?
  // 6.做一个缓存，记录请求过的页数。点击下一页，有请求过的，不需要再请求。

  // TODO test
  // -------------------------------
  var dataItem = {
    title:
      "我是今日头条第一条新闻，标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长",
    date: "2021年3月12日 12:00:00",
    img: "../static/dingrun/image/group-business/group-business.png",
    id: 0,
    link: "#",
  };

  var listDatas = [];
  var testTotalSize = 100;
  var id = 0;
  for (var i = 0; i < testTotalSize; i++) {
    listDatas.push({
      title: i + dataItem.title + i,
      date: dataItem.date,
      img: dataItem.img,
      id: ++id,
      link: dataItem.link,
    });
  }

  // -------------------------------

  var pageIndex = 1;
  var pageSize = 8;
  var totalSize = 100;
  var maxIndex = Math.ceil(100 / 8);

  var cacheMap = {};

  var loading = {
    show: function () {
      $("#carousel-news .loading-wrapper").show();
    },
    hide: function () {
      $("#carousel-news .loading-wrapper").hide();
    },
  };

  /**
   *
   * @param {*} pageindex 分页页数 1开始
   * @param {*} size 每页数量 8个
   */
  function getListData(pageindex, size, callback) {
    // TODO 这里以后改成接入ajax
    setTimeout(function () {
      var res = [];
      var startIndex = (pageindex - 1) * size;
      var endIndex =
        startIndex + size > totalSize ? totalSize : startIndex + size;
      res = listDatas.slice(startIndex, endIndex);
      callback({
        data: res,
        pageindex: pageindex,
        pagesize: size,
        totalSize: totalSize,
      });
    }, 500);
  }

  /**
   * 格式化轮播数据分页
   * @param {*} listData
   */
  function initCarouselData(listData) {
    // 每页8个
    var carouses = _.chunk(listData.data, pageSize);
    for (var i = 0; i < carouses.length; i++) {
      // 加入缓存
      cacheMap[i + 1] = carouses[i];
      var carsouse = renderCarouseItem(carouses[i]);
      $("#carousel-inner").append($(carsouse));
    }
    if (carouses.length) {
      var firstItem = $("#carousel-inner").find(".item:first-child");
      firstItem.addClass("active");
    }
  }

  function renderCarouseItem(datas) {
    // var liTemplate = document.getElementById("liTemplate");
    // var carouselTemplate = document.getElementById("carouselTemplate");
    var res = [];
    // for (var i = 0; i < datas.length; i++) {
    //   var item = _.template($('#liTemplate').html())(datas[i]);
    //   res.push(item);
    // }
    var tps = _.template($("#carouselTemplate").html())({
      items: datas,
    });
    return tps;
  }

  function getDataByPageIndex(pageIndex, callback) {
    if (cacheMap[pageIndex]) {
      // 从缓存取
      callback(cacheMap[pageIndex]);
    } else {
      // 从接口取
      getListData(pageIndex, pageSize, function (res) {
        cacheMap[pageIndex] = res.data;
        callback(cacheMap[pageIndex]);
      });
    }
  }

  // 默认获取5页 40条
  getListData(1, 5 * pageSize, function (res) {
    // 记录下新闻数据总的数量，以后通过这个确认是否还有下一页
    initCarouselData(res);
  });
})();
